import React from "react";
import { Form, Col, Input, Row, Select,TimePicker,Divider } from "antd";
import { LeftOutlined,AlignLeftOutlined} from "@ant-design/icons";
const { Option } = Select;

// 编辑门店页面方法
const addShopPage = (name) => {
   
    return (
      <React.Fragment>
       <Col span={24}>
          <div   className="headAddShop">
            <Row>
            <Col span={8}>
              <LeftOutlined  style={{fontSize:30,paddingLeft:10,paddingTop:10,paddingBottom:10 }}/>
              </Col>
              <Col span={8} style={{paddingLeft:100,paddingTop:10,paddingBottom:10}}>
                <span style={{center:30,fontSize:20}}>编辑-{name}</span>
              </Col>

              <Col span={8} style={{paddingTop:10,paddingBottom:10,paddingRight:10,paddingLeft:230}}>
                <AlignLeftOutlined/>
              </Col>
            </Row>
            
          </div>
        </Col>
            {/** 整体内容 */}
        <Col span={24}>

          {/** 通用消息 */}
          <Col span={24} className="gInfoAddShop">
            <span className="titleMess">通用消息</span>
          </Col>
    
        
          <Row className="divfix">
          <Col span={4}  className="leftCommDiv">
            门店名
          </Col>
          <Col span={20}>
          <Form.Item 
          name="shopName"
          rules={[{ required: true,message:"请输入用户名"},{max:20,message:"长度过大"}]}
          >
            <Input  style={{width:'100%',borderTopRightRadius:10,borderBottomRightRadius:10}}/>
            </Form.Item>
          
            </Col>
          </Row>

          <Row>
            <Col span={12}>
           
              <Row className="divfix">
              <Col span={8} className="leftCommDiv" >主营业态</Col>
              <Col span={16} >
              <Form.Item
              name="businessType"
              rules={[{ required: true,message:"请选择业态类型"}]}
              style={{height:8}}
              >
              <Select>
              <Option value="DINNER">正餐</Option>
              <Option value="FAST_FOOD">快餐</Option>
              <Option value="HOT_POT">火锅</Option>
              <Option value="BARBECUE">烧烤</Option>
              <Option value="WESTERN_FOOD">西餐</Option>
              </Select>
              </Form.Item>
              </Col>
              </Row>
            </Col>
       

            <Col span={12}>
           
              <Row className="divfix" >
              <Col span={8}  className="leftCommDiv">管理类型</Col>
              <Col span={16}>
              <Form.Item
              name="managementType"
              rules={[{ required: true,message:"请选择管理类型"}]}
              style={{height:8}}
              >
              <Select>
              <Option value="DIRECT_SALES">直营</Option>
              <Option value="ALLIANCE">加盟</Option>
              </Select>
              </Form.Item>
              </Col>
              </Row>
              </Col>
          </Row>
          {/** 联系方式 */}

          <Col span={24} className="gInfoAddShop">
            <span className="titleMess">联系方式</span>
          </Col>

          <Row>
            <Col span={8}>
                     <Row className="divfix">
              <Col span={10} className="leftCommDiv">座机号</Col>
              <Col span={14}>
              <Form.Item  
                  name="telephone"
                 rules={[{max:15,message:"长度过大"},{min:8,message:"长度不足"},{type:'string'},{pattern:/^[0-9 | -]+$/,message:"参数不合法"}]}>
                <Input style={{borderTopRightRadius:10,borderBottomRightRadius:10}}/>
              </Form.Item>
                
                </Col>
              </Row>
            
            </Col>

            <Col span={8}>
              

              <Row className="divfix">
              <Col span={10}  className="leftCommDiv">手机号</Col>
              <Col span={14}>

              <Form.Item
              name="cellphone"
              rules={[{max:15,message:"长度过大"},{min:11,message:"长度不足"},{type:'string'},{pattern:/^[0-9 | -]+$/,message:"参数不合法"}]}
              >
                <Input style={{borderTopRightRadius:10,borderBottomRightRadius:10}}/>
              </Form.Item>

                
                </Col>
              </Row>
            
              </Col>

              <Col span={8}>
             
              <Row  className="divfix">
              <Col span={10} className="leftCommDiv">联系人</Col>
              <Col span={14}>
              <Form.Item
                   name="contactName"
                    rules={[{required:true,message:"请输入联系人姓名"},{max:8,message:"长度过大"},{type:'string'}]}
                   >
                <Input style={{borderTopRightRadius:10,borderBottomRightRadius:10}}/>
                </Form.Item>
                </Col>
              </Row>

            
             
            </Col>
          </Row>
 
            
            <Row className="divfix">
              <Col span={4} className="leftCommDiv">地址</Col>
              <Col span={20}>
              <Form.Item
               name="contactAddress"
               rules={[{required:true,message:"请输入地址"},{max:30,message:"长度过大"},{type:'string'}]}
               >

                <Input  style={{borderTopRightRadius:10,borderBottomRightRadius:10}} />
                </Form.Item>

                </Col>
            </Row>
           

           {/** 经营信息 */}

           <Col span={24}  className="gInfoAddShop">
            <span className="titleMess">经营信息</span>
          </Col>

            <Row>
              <Col span={14}>
                <Row  className="divfix">
                  <Col span={6} className="leftCommDiv">营业时间</Col>
                  <Col span={18}>
                    <Form.Item
                      name="businessHours"
                      rules={[{required:true,message:"请选择时间"}]}
                      style={{height:8}}
                    >
                    <TimePicker.RangePicker />
                    </Form.Item> 
                    </Col>
                </Row>
               
              </Col>
              <Col span={10}>
            
              <Row className="divfix">
                <Col span={6} className="leftCommDiv">门店面积</Col>
                  <Col span={18}>
                  <Form.Item
                     name="businessArea"
                     rules={[{max:10,message:"长度过大"}]}
                     >
                    <Input/>
                    </Form.Item>
                    </Col>
                </Row>
              
            
              </Col>
            </Row>
         

              <Row  className="divfix" style={{marginTop:20}}>
              <Col span={4}  className="leftCommDiv">门店介绍</Col>
              <Col span={20}>
              <Form.Item name="comment"
             rules={[{max:100,message:"长度过大"}]}
            >
                <Input />
                </Form.Item>
                </Col>
            </Row>
           
        </Col>
        <Divider style={{fontSize:20}}/>
      </React.Fragment>
    );
  };
  export default addShopPage;